﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>统计</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/bootstrap-theme.min.css">
    <script>window.$ = window.jQuery = require('jquery');</script>
    <style>
        .table-center td,.table-center thead td,.table-center tbody td{text-align: center;vertical-align: middle !important;}
        #query-result .code{width: 60px}
        .label-code{padding: 4px 4px;border-radius: 1em;}
        .label-attr{font-size: 12px;}
        .zodiac-table tbody tr td{height: 50px;width: 13%}
        .reset-cdn{font-size: 12px;margin-left: 15px;line-height: 20px;padding: 5px 15px;cursor: pointer;background-color: #fc4f26}
    </style>
</head>
<body>

<div id="vue-app">
    <div class="container" style="padding-top: 1rem;width:100%">
        <div class="starter-template">
            <!-- 组件会在 `currentTabComponent` 改变时改变 -->
            <component v-bind:is="currentRoute" v-on:changeroute="setCurrentRoute" v-bind:params="params"></component>
        </div>
    </div><!-- /.container -->
</div>


<script type="text/x-template" id="config-page-template">
    <div class="form-horizontal" style="max-width: 800px;margin: 0 auto">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">吉凶</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">吉肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jixiong.ji">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">凶肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jixiong.xiong">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">家野肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">家肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jiaye.jia">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">野肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jiaye.ye">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">天地肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">天肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="tiandi.tian">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">地肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="tiandi.di">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">阴阳肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">阴肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="yinyang.yin">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">阳肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="yinyang.yang">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">单双笔肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">单笔肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="danshuang.dan">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">双笔肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="danshuang.shuang">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">黑白肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">黑肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="heibai.hei">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">白肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="heibai.bai">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">男女肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">男肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="nannv.nan">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">女肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="nannv.nv">
                    </div>
                </div>
            </div>
        </div>


        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">三色肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">红肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="yanse.hong">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">蓝肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="yanse.lan">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">绿肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="yanse.lv">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">四季肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">春肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jijie.chun">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">夏肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jijie.xia">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">秋肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jijie.qiu">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">冬肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="jijie.dong">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">方位肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">东肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="fangxiang.dong">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">南肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="fangxiang.nan">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">西肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="fangxiang.xi">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">北肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="fangxiang.bei">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">琴棋书画肖</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">琴肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="qqsh.qin">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">棋肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="qqsh.qi">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">书肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="qqsh.shu">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">画肖：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="qqsh.hua">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">大小数</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">大数：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="daxiao.da">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">小数：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="daxiao.xiao">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">合单双</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">合单：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="he.dan">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">合双：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="he.shuang">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">三色波号</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">红波号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="bo.hong">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">蓝波号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="bo.lan">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">绿波号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="bo.lv">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">五行号</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label text-right">金号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="wuxing.jin">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">木号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="wuxing.mu">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">水号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="wuxing.shui">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">火号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="wuxing.huo">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label text-right">土号：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="" v-model="wuxing.tu">
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-bottom: 20px">
            <button type="button" class="btn btn-primary" style="width: 110px" v-on:click="save">保存</button>
            <button type="button" class="btn btn-default" style="width: 110px" v-on:click="changeTab">返回</button>
        </div>
    </div>
</script>
<script type="text/x-template" id="add-page-template">
    <table>
        <thead>
        <tr>
            <td colspan="7">
                <div class="form-inline">
                    <div class="form-group">
                        <label class="control-label">开奖日期：</label>
                        <input type="text" :disabled="!!params" class="form-control"  placeholder="请选择开奖日期" v-model="time" id="index-add-date">
                    </div>
                    <div class="form-group">
                        <label class="control-label">开奖期号：</label>
                        <input type="number" class="form-control"  placeholder="输入开奖期号，只能是数字" v-model="qi">
                    </div>
                </div>
            </td>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td v-for="(item,index) in ma">
                    <zodiac v-bind:item="ma[index]" v-on:change="setRes"></zodiac>
                </td>
            </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="7">
                <button type="button" class="btn btn-primary" style="width: 110px" v-on:click="save">保存</button>
                <button v-show="params" type="button" class="btn btn-danger" style="width: 110px" v-on:click="del">删除</button>
                <button type="button" class="btn btn-default" style="width: 110px" v-on:click="changeTab">返回</button>


            </td>
        </tr>
        </tfoot>
    </table>
</script>
<script type="text/x-template" id="zodiac-page-template">
    <div>
        <div class="table-responsive"  style="margin-top: 10px;">
            <table class="table table-condensed table-bordered table-center zodiac-table" style="height:152px">
                <thead><td colspan="7">{{item.name}}</td></thead>
                <tbody>
                <tr>
                    <td><input type="text" v-model="item.value" class="form-control" style="width: 30px;padding:0;text-align:center"></td>
                    <td>3-{{item.value % 3}}</td>
                    <td>4-{{item.value % 4}}</td>
                    <td>5-{{item.value % 5}}</td>
                    <td>6-{{item.value % 6}}</td>
                    <td>7-{{item.value % 7}}</td>
                    <td>8-{{item.value % 8}}</td>
                </tr>
                <tr>
                    <td>{{currZodiac.name}}</td>
                    <td>{{currZodiac.wuxing}}</td>
                    <td>{{currZodiac.jixiong}}</td>
                    <td>{{currZodiac.jiaye}}</td>
                    <td>{{currZodiac.tiandi}}</td>
                    <td>{{currZodiac.yinyang}}</td>
                    <td>{{currZodiac.danshuang}}</td>
                </tr>
                <tr>
                    <td>{{currZodiac.heibai}}</td>
                    <td>{{currZodiac.nannv}}</td>
                    <td>{{currZodiac.yanse}}</td>
                    <td>{{currZodiac.jijie}}</td>
                    <td>{{currZodiac.fangxiang}}</td>
                    <td>{{currZodiac.qqsh}}</td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

</script>
<script type="text/x-template" id="query-page-template">
    <div>
        <div class="form-inline">
            <div class="form-group">
                <label>选择属性：</label>
                <button class="btn" v-for="(name,index) in attrs"
                        v-bind:class="{'btn-default':index!=currAttr, 'btn-primary':index==currAttr}"
                        v-on:click="setCurrAttr(index)">{{name}}</button>
            </div>
        </div>
        <div class="form-inline" style="margin-top: 15px">
            <div class="form-group">
                <label>选择位置：</label>
                <label class="checkbox-inline" v-for="(name,index) in pos">
                    <input type="checkbox"  :value="index" v-model="currPos"> {{name}}
                </label>
                <span class="label reset-cdn" v-on:click="resetCurrPos">还原</span>
            </div>
        </div>
        <div>
            <button type="button" class="btn btn-info pull-right" v-on:click="changeTab('config')" style="margin: 0 10px 20px;">配置</button>
            <button type="button" class="btn btn-info pull-right" v-on:click="changeTab('add')" style="margin: 0 10px 20px;">+ 新增数据</button>
        </div>
        <table id="query-result" class="table table-bordered table-hover table-center" style="margin-top: 35px;width: 2270px">
            <thead>
            <tr>
                <td style="width: 80px" rowspan="2">开奖时间</td>
                <td style="width: 80px" rowspan="2">期号</td>
                <td v-show="isShowPos(0)" colspan="7">正码一</td>
                <td v-show="isShowPos(1)" colspan="7">正码二</td>
                <td v-show="isShowPos(2)" colspan="7">正码三</td>
                <td v-show="isShowPos(3)" colspan="7">正码四</td>
                <td v-show="isShowPos(4)" colspan="7">正码五</td>
                <td v-show="isShowPos(5)" colspan="7">正码六</td>
                <td v-show="isShowPos(6)" colspan="7">特码</td>
            </tr>
            <tr>
                <td v-show="isShowPos(0)">码</td>
                <td v-show="isShowPos(0)">除3</td>
                <td v-show="isShowPos(0)">除4</td>
                <td v-show="isShowPos(0)">除5</td>
                <td v-show="isShowPos(0)">除6</td>
                <td v-show="isShowPos(0)">除7</td>
                <td v-show="isShowPos(0)">除8</td>

                <td v-show="isShowPos(1)">码</td>
                <td v-show="isShowPos(1)">除3</td>
                <td v-show="isShowPos(1)">除4</td>
                <td v-show="isShowPos(1)">除5</td>
                <td v-show="isShowPos(1)">除6</td>
                <td v-show="isShowPos(1)">除7</td>
                <td v-show="isShowPos(1)">除8</td>

                <td v-show="isShowPos(2)">码</td>
                <td v-show="isShowPos(2)">除3</td>
                <td v-show="isShowPos(2)">除4</td>
                <td v-show="isShowPos(2)">除5</td>
                <td v-show="isShowPos(2)">除6</td>
                <td v-show="isShowPos(2)">除7</td>
                <td v-show="isShowPos(2)">除8</td>

                <td v-show="isShowPos(3)">码</td>
                <td v-show="isShowPos(3)">除3</td>
                <td v-show="isShowPos(3)">除4</td>
                <td v-show="isShowPos(3)">除5</td>
                <td v-show="isShowPos(3)">除6</td>
                <td v-show="isShowPos(3)">除7</td>
                <td v-show="isShowPos(3)">除8</td>

                <td v-show="isShowPos(4)">码</td>
                <td v-show="isShowPos(4)">除3</td>
                <td v-show="isShowPos(4)">除4</td>
                <td v-show="isShowPos(4)">除5</td>
                <td v-show="isShowPos(4)">除6</td>
                <td v-show="isShowPos(4)">除7</td>
                <td v-show="isShowPos(4)">除8</td>

                <td v-show="isShowPos(5)">码</td>
                <td v-show="isShowPos(5)">除3</td>
                <td v-show="isShowPos(5)">除4</td>
                <td v-show="isShowPos(5)">除5</td>
                <td v-show="isShowPos(5)">除6</td>
                <td v-show="isShowPos(5)">除7</td>
                <td v-show="isShowPos(5)">除8</td>

                <td v-show="isShowPos(6)">码</td>
                <td v-show="isShowPos(6)">除3</td>
                <td v-show="isShowPos(6)">除4</td>
                <td v-show="isShowPos(6)">除5</td>
                <td v-show="isShowPos(6)">除6</td>
                <td v-show="isShowPos(6)">除7</td>
                <td v-show="isShowPos(6)">除8</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in list" v-on:dblclick="edit(item.time)">
                <td>{{item.time}}</td>
                <td>{{item.qi}}期</td>
                <td v-show="isShowPos(0)">
                    <ma v-bind:num="item.code1" v-bind:attr="currAttr"></ma>
                </td>
                <td v-show="isShowPos(0)">{{item.code1 % 3}}</td>
                <td v-show="isShowPos(0)">{{item.code1 % 4}}</td>
                <td v-show="isShowPos(0)">{{item.code1 % 5}}</td>
                <td v-show="isShowPos(0)">{{item.code1 % 6}}</td>
                <td v-show="isShowPos(0)">{{item.code1 % 7}}</td>
                <td v-show="isShowPos(0)">{{item.code1 % 8}}</td>

                <td v-show="isShowPos(1)">
                    <ma v-bind:num="item.code2" v-bind:attr="currAttr"></ma>
                </td>
                <td v-show="isShowPos(1)">{{item.code2 % 3}}</td>
                <td v-show="isShowPos(1)">{{item.code2 % 4}}</td>
                <td v-show="isShowPos(1)">{{item.code2 % 5}}</td>
                <td v-show="isShowPos(1)">{{item.code2 % 6}}</td>
                <td v-show="isShowPos(1)">{{item.code2 % 7}}</td>
                <td v-show="isShowPos(1)">{{item.code2 % 8}}</td>

                <td v-show="isShowPos(2)">
                    <ma v-bind:num="item.code3" v-bind:attr="currAttr"></ma>
                </td>
                <td v-show="isShowPos(2)">{{item.code3 % 3}}</td>
                <td v-show="isShowPos(2)">{{item.code3 % 4}}</td>
                <td v-show="isShowPos(2)">{{item.code3 % 5}}</td>
                <td v-show="isShowPos(2)">{{item.code3 % 6}}</td>
                <td v-show="isShowPos(2)">{{item.code3 % 7}}</td>
                <td v-show="isShowPos(2)">{{item.code3 % 8}}</td>

                <td v-show="isShowPos(3)">
                    <ma v-bind:num="item.code4" v-bind:attr="currAttr"></ma>
                </td>
                <td v-show="isShowPos(3)">{{item.code4 % 3}}</td>
                <td v-show="isShowPos(3)">{{item.code4 % 4}}</td>
                <td v-show="isShowPos(3)">{{item.code4 % 5}}</td>
                <td v-show="isShowPos(3)">{{item.code4 % 6}}</td>
                <td v-show="isShowPos(3)">{{item.code4 % 7}}</td>
                <td v-show="isShowPos(3)">{{item.code4 % 8}}</td>

                <td v-show="isShowPos(4)">
                    <ma v-bind:num="item.code5" v-bind:attr="currAttr"></ma>
                </td>
                <td v-show="isShowPos(4)">{{item.code5 % 3}}</td>
                <td v-show="isShowPos(4)">{{item.code5 % 4}}</td>
                <td v-show="isShowPos(4)">{{item.code5 % 5}}</td>
                <td v-show="isShowPos(4)">{{item.code5 % 6}}</td>
                <td v-show="isShowPos(4)">{{item.code5 % 7}}</td>
                <td v-show="isShowPos(4)">{{item.code5 % 8}}</td>

                <td v-show="isShowPos(5)">
                    <ma v-bind:num="item.code6" v-bind:attr="currAttr"></ma>
                </td>
                <td v-show="isShowPos(5)">{{item.code6 % 3}}</td>
                <td v-show="isShowPos(5)">{{item.code6 % 4}}</td>
                <td v-show="isShowPos(5)">{{item.code6 % 5}}</td>
                <td v-show="isShowPos(5)">{{item.code6 % 6}}</td>
                <td v-show="isShowPos(5)">{{item.code6 % 7}}</td>
                <td v-show="isShowPos(5)">{{item.code6 % 8}}</td>

                <td v-show="isShowPos(6)">
                    <ma v-bind:num="item.tcode" v-bind:attr="currAttr"></ma>
                </td>
                <td v-show="isShowPos(6)">{{item.tcode % 3}}</td>
                <td v-show="isShowPos(6)">{{item.tcode % 4}}</td>
                <td v-show="isShowPos(6)">{{item.tcode % 5}}</td>
                <td v-show="isShowPos(6)">{{item.tcode % 6}}</td>
                <td v-show="isShowPos(6)">{{item.tcode % 7}}</td>
                <td v-show="isShowPos(6)">{{item.tcode % 8}}</td>
            </tr>
            </tbody>
        </table>
        <pager v-bind:count="page.count" v-bind:limit="page.limit" v-bind:curr-page="page.page" v-on:jump="jump"></pager>
    </div>

</script>
<script type="text/x-template" id="pager-template">
    <nav aria-label="...">
        <ul class="pagination">
            <li v-for="page in pages" v-bind:class="{active:currPage==page.num}">
                <template v-if="page.type === 'pre'">
                    <a href="javascript:void (0);" aria-label="Previous"  v-on:click="jump(page.num)"> <span aria-hidden="true">&laquo;</span></a>
                </template>
                <template v-else-if="page.type === 'next'">
                    <a href="javascript:void (0);" aria-label="Next" v-on:click="jump(page.num)"><span aria-hidden="true">&raquo;</span></a>
                </template>
                <template v-else>
                    <a href="javascript:void (0);"  v-on:click="jump(page.num)">{{page.name}}<span class="sr-only" v-show="currPage==page.num">(current)</span></a>
                </template>
            </li>
        </ul>
    </nav>
</script>


<script type="text/x-template" id="ma-template">
    <div>
        <span class="label label-code" :class="{'label-danger':isColor('hong'),'label-success':isColor('lv'),'label-primary':isColor('lan')}">{{ formatCode(item.code)}}</span>
        <span class="label-attr">{{item.attr}}</span>

    </div>
</script>

<script src="../static/js/database.js"></script>
<script src="../static/js/zodiac.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/vue.min.js"></script>
<script src="../static/js/layer/layer.js"></script>
<script src="../static/js/laydate/laydate.js"></script>
<script src="../static/js/vue/query.page.js"></script>
<script src="../static/js/vue/add.page.js"></script>
<script src="../static/js/vue/config.page.js"></script>
<script>
    let _vue = new Vue({
        el: '#vue-app',
        data: {
            currentRoute: 'query',
            navs:{add:'主页', query:'数据查询', config:'配置中心'},
            params:null
        },
        methods: {
            setCurrentRoute:function(index, params) {
                console.log('setCurrentRoute:',index);
                console.log('params:', params);
                this.params = params;
                this.currentRoute = index;
            }
        },
        created:function () {
            let zodiacKey = ['jixiong','jiaye','tiandi','yinyang','danshuang','heibai','nannv','yanse','jijie','fangxiang','qqsh'];
            let numKey = ['wuxing','bo','he','daxiao'];
            for (let key in zodiacKey) {
                database.getRow('config', {key: zodiacKey[key]}, function (res, err) {
                    if (!err && res && res.value) {
                        let value = JSON.parse(res.value);
                        for (let index in value) {
                            value[index] = value[index].replace('，', ',').split(',').map(function (item) {
                                return item.trim();
                            });
                        }
                        zodiac.config[key + 'Zodiac'] = value;
                    }

                });
            }

            for (let key in numKey) {
                database.getRow('config', {key: numKey[key]}, function (res, err) {
                    if (!err && res && res.value) {
                        let value = JSON.parse(res.value);
                        for (let index in value) {
                            value[index] = value[index].replace('，', ',').split(',').map(function (item) {
                                return parseInt(item);
                            });
                        }
                        zodiac.config[key + 'Zodiac'] = value;
                    }
                });
            }
        }
    })

</script>
</body>
</html>
